<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%
    HttpSession session1 = request.getSession();
    String avatarUrl = (String) session1.getAttribute("userAvatarUrl"); // 头像地址
    String nickname = (String) session1.getAttribute("username"); // 用户昵称

    String defaultUrl = "https://tse1-mm.cn.bing.net/th/id/OIP-C.j57souiFOvYA0LUiw-2BkAHaHa?rs=1&pid=ImgDetMain";
    if (avatarUrl == null) {
        avatarUrl = defaultUrl; // 默认头像
    }
%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }
        .sidebar {
            height: 100vh;
            background-color: #343a40;
            padding: 20px;
            color: white;
        }
        .sidebar img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid white;
            display: block;
            margin: 0 auto 10px;
        }
        .nav-link {
            color: white;
            font-size: 1.1rem;
        }
        .nav-link:hover {
            background-color: #495057;
        }
        .content {
            padding: 20px;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏 -->
        <nav class="col-md-3 col-lg-2 d-md-block sidebar">
            <div class="text-center">
                <img src="<%= avatarUrl %>" alt="用户头像">
                <h4><%= nickname %></h4>
            </div>
            <ul class="nav flex-column mt-3">
                <li class="nav-item">
                    <a class="nav-link" href="#profile">个人信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#orders">我的订单</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-danger" href="#" onclick="logout()">退出登录</a>
                </li>
            </ul>
        </nav>

        <!-- 主要内容 -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 content">
            <h2>用户中心</h2>

            <!-- 修改个人信息 -->
            <div id="profile" class="card my-3">
                <div class="card-header">修改个人信息</div>
                <div class="card-body">
                    <form id="updateForm">
                        <div class="mb-3">
                            <label class="form-label">新用户名</label>
                            <input type="text" id="newUsername" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">邮箱</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-primary">更新信息</button>
                    </form>
                </div>
            </div>

            <!-- 修改密码 -->
            <div class="card my-3">
                <div class="card-header">修改密码</div>
                <div class="card-body">
                    <form id="passwordForm">
                        <div class="mb-3">
                            <label class="form-label">旧密码</label>
                            <input type="password" id="oldPassword" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">新密码</label>
                            <input type="password" id="newPassword" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-warning">修改密码</button>
                    </form>
                </div>
            </div>

            <!-- 上传头像 -->
            <div class="card my-3">
                <div class="card-header">上传头像</div>
                <div class="card-body">
                    <form id="avatarForm" enctype="multipart/form-data">
                        <div class="mb-3">
                            <input type="file" id="avatar" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-success">上传头像</button>
                    </form>
                </div>
            </div>

            <!-- 订单信息 -->
            <div id="orders" class="card my-3">
                <div class="card-header">我的订单</div>
                <div class="card-body">
                    <ul id="orderList" class="list-group"></ul>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    // 更新个人信息
    document.getElementById("updateForm").addEventListener("submit", function (event) {
        event.preventDefault();
        fetch("/userInfoServlet?action=updateInfo", {
            method: "POST",
            body: new URLSearchParams({
                newUsername: document.getElementById("newUsername").value,
                email: document.getElementById("email").value
            })
        }).then(res => res.json()).then(data => alert(data.message || "更新成功"));
    });

    // 修改密码
    document.getElementById("passwordForm").addEventListener("submit", function (event) {
        event.preventDefault();
        fetch("/userInfoServlet?action=updatePassword", {
            method: "POST",
            body: new URLSearchParams({
                oldPassword: document.getElementById("oldPassword").value,
                newPassword: document.getElementById("newPassword").value
            })
        }).then(res => res.json()).then(data => alert(data.message || "密码修改成功"));
    });

    // 上传头像
    document.getElementById("avatarForm").addEventListener("submit", function (event) {
        event.preventDefault();
        let formData = new FormData();
        formData.append("avatar", document.getElementById("avatar").files[0]);

        fetch("/userInfoServlet?action=updateAvatar", {
            method: "POST",
            body: formData
        }).then(res => res.json()).then(data => {
            if (data.status === "success") {
                alert("头像上传成功");
                location.reload();
            } else {
                alert("上传失败: " + data.message);
            }
        });
    });

    // 退出登录
    function logout() {
        fetch("/userInfoServlet?action=logout").then(() => {
            window.location.href = "/login.jsp";
        });
    }

    // 获取订单
    fetch("/cartServlet?action=getOrders").then(res => res.json()).then(data => {
        if (data.status === "success") {
            let list = document.getElementById("orderList");
            data.orders.forEach(order => {
                let li = document.createElement("li");
                li.classList.add("list-group-item");
                li.innerHTML = `订单 #${order.id} - ${order.productName} - ￥${order.total} - ${order.status}`;
                list.appendChild(li);
            });
        }
    });
</script>

</body>
</html>
